<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="lib :: common_header"></head>
<body>
<style>
    body {background:#fafafa;}
</style>
<div th:replace="lib :: header_box"></div>
<div th:replace="lib :: menu_box (1)"></div>

<div class="main-box">
    <div class="main-container">
        <div id="app" class="xiao-zhuan-feng" >
            <el-row :gutter="20">
                <!-- 左边半扇 -->
                <el-col :span="24">
                    <ul class="fix pb10">
                        <li class="l">
								<span class="my-project">
									最新工程
								</span>
                            <a class="my-project-type selected ie_dib pb5"
                               href="#">
                                合作项目
                            </a>
                            <a class="my-project-type ie_dib pb5"
                               href="#">
                                科研项目
                            </a>
                        </li>
                        <li class="r">
                            <el-button
                                    plain
                                    icon="el-icon-plus"
                                    type="primary">
                                创建新工程
                            </el-button>
                        </li>
                    </ul>

                    <el-row :gutter="20">
                        <el-col :span="6" v-for="i in 4">
                            <el-card class="rel" shadow="hover">
                                <div class="my-project-name-box rel">
                                    <div class="b my-project-name">
                                        少林捂裤裆工程
                                    </div>
                                    <div class="f12 mt5 my-project-status">
                                        运行中 · 2019-03-12
                                    </div>

                                    <div class="abs user-header-box">
                                        <picture class="abs user-header"
                                                 style="right:0; z-index:3;">
                                            <img th:src="@{/images/user-header.jpg}">
                                        </picture>
                                        <picture class="abs user-header"
                                                 style="right:25px; z-index:2;">
                                            <img th:src="@{/images/user-header3.jpg}">
                                        </picture>
                                        <picture class="abs user-header"
                                                 style="right:45px; z-index:1;">
                                            <img th:src="@{/images/user-header2.jpg}">
                                        </picture>
                                    </div><!-- /user-header-box -->
                                </div><!-- /my-project-name-box -->

                                <div class="xiao-heng"></div><!-- /xiao-lai -->

                                <ul class="my-project-info fix">
                                    <li class="l xiao-info">
                                        <div class="f12 mb5"
                                             style="color:#9fa2a9;">
                                            数据集
                                        </div>
                                        <div style="font-size:30px;
												color:#233568">
                                            18
                                        </div>
                                    </li>
                                    <li class="l" style="margin-top:6px;">
                                        <div class="xiao-shu"></div><!-- /xiao-lai -->
                                    </li>
                                    <li class="l xiao-info">
                                        <div class="f12 mb5"
                                             style="color:#9fa2a9;">
                                            会员组织
                                        </div>
                                        <div style="font-size:30px;
												color:#233568">
                                            5
                                        </div>
                                    </li>
                                </ul>

                                <div class="xiao-heng"></div><!-- /xiao-lai -->

                                <div class="da-di-ba abs">
                                    <i class="l el-icon-position"></i>
                                    <i class="r el-icon-more-outline"></i>
                                </div><!-- /da-di-ba -->
                            </el-card>
                        </el-col>
                    </el-row><!---->
                    <br><br>

                    <div class="fix mb20">
                        <div class="l my-project"
                             style="margin-top:6px;">
                            图表分析
                        </div>

                        <div class="r">
                            <el-date-picker
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div class="my-project mb10">
                                    <div class="l">
                                        数据集使用量
                                        <div class="f12 mt5"
                                             style="color:#9a9eac;">
                                            范围：2019/01/01 至 2019/06/30
                                        </div>
                                    </div>
                                    <i class="r el-icon-more-outline"
                                       style="margin-top:4px;
														 color:#9fa2a9;"></i>
                                </div>
                                <template>
                                    <ve-line :data="chartData"
                                             height="415px"
                                             :legend-visible="false"
                                             :extend="chartExtend"
                                             :settings="chartSettings">
                                    </ve-line>
                                </template>
                            </el-card>
                        </el-col>

                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div class="my-project mb10">
                                    <div class="l">
                                        数据集下载量
                                        <div class="f12 mt5"
                                             style="color:#9a9eac;">
                                            范围：2019/01/01 至 2019/06/30
                                        </div>
                                    </div>
                                    <i class="r el-icon-more-outline"
                                       style="margin-top:4px;
														 color:#9fa2a9;"></i>
                                </div>
                                <template>
                                    <ve-line :data="chartData2"
                                             height="415px"
                                             :legend-visible="false"
                                             :extend="chartExtend"
                                             :settings="chartSettings">
                                    </ve-line>
                                </template>
                            </el-card>
                        </el-col>

                        <el-col :span="8">
                            <el-card shadow="hover">
                                <div class="my-project mb10">
                                    最新上传数据集
                                    <i class="r el-icon-more-outline"
                                       style="margin-top:4px;
														 color:#9fa2a9;"></i>
                                </div>
                                <ul>
                                    <template v-for="item in dataSet">
                                        <li class="fix pt10 pb10 ni-ma-bi"
                                            style="border-bottom:1px solid #f1f1f3;">
                                            <picture class="user-header2 l"
                                                     style="margin-top:2px;">
                                                <img :src="item.img">
                                            </picture>
                                            <div class="l ml20">
                                                <div style="color:#154363;">
                                                    {{ item.name }}
                                                </div>
                                                <div class="f12"
                                                     style="color:#c7ced9; margin-top:5px;">
                                                    {{ item.dep }}
                                                </div>
                                            </div>
                                            <div class="r niao-ren f12">
                                                2019/01/18
                                            </div>
                                        </li>
                                    </template>
                                </ul>
                            </el-card>
                        </el-col>

                    </el-row>

                </el-col><!-- /左边半扇 -->


            </el-row>

        </div><!-- /app -->
    </div>
</div>
<div th:replace="lib :: javascript_box"></div>
<script th:src="@{/lib/vchart.js}"></script>
<script th:src="@{/lib/console/index.js}"></script>
</body>
</html>
